<template>
  <el-main class="e-m-7">
    <span class="e-m-7-text">{{boutique}}</span>
    <el-row :gutter="0" class="e-m-7-row">
      <el-col :span="6">
        <div class="m7-di1">
          <span>{{part1[0].title}}</span>
          <img :src="part1[0].img" alt="" width="281px" height="210">
          <h4>{{part1[0].text}}</h4>
          <p>{{part1[0].name}}</p>
        </div>
      </el-col>
      <el-col :span="6" >
        <div class="m7-di1">
          <span>{{part1[1].title}}</span>
          <img :src="part1[1].img" alt="" width="281px" height="210">
          <h4>{{part1[1].text}}</h4>
          <p>{{part1[1].name}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="m7-di1">
          <span>{{part1[2].title}}</span>
          <img :src="part1[2].img"  alt="" width="281px" height="210">
          <h4>{{part1[2].text}}</h4>
          <p>{{part1[2].name}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="m7-di1">
          <span>{{part1[3].title}}</span>
          <img :src="part1[3].img"  alt="" width="281px" height="210">
          <h4>{{part1[3].text}}</h4>
          <p>{{part1[3].name}}</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="0" class="e-m-7-row2">
      <el-col :span="6">
        <div class="m7-di1">
          <span>{{part1[4].title}}</span>
          <img :src="part1[4].img"  alt="" width="281px" height="210">
          <h4>{{part1[4].text}}</h4>
          <p>{{part1[4].name}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="m7-di1">
          <span>{{part1[7].title}}</span>
          <img :src="part1[7].img"  alt="" width="281px" height="210">
          <h4>{{part1[7].text}}</h4>
          <p>{{part1[7].name}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="m7-di1">
          <span>{{part1[5].title}}</span>
          <img :src="part1[5].img"  alt="" width="281px" height="210">
          <h4>{{part1[5].text}}</h4>
          <p>{{part1[5].name}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="m7-di1">
          <span>{{part1[6].title}}</span>
          <img :src="part1[6].img"  alt="" width="281px" height="210">
          <h4>{{part1[6].text}}</h4>
          <p>{{part1[6].name}}</p>
        </div>
      </el-col>
    </el-row>
    <span class="e-m-7-text2">{{issue}}</span>
  </el-main>
</template>

<script>
  export default {
    name: "ContentSixth",
    data(){
      return{
        boutique: '精品讲座',
        issue: '发布讲座',
        part1: [
          {
            title: '音频讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b1.jpg',
            text: '书法欣赏入门',
            name: '李小燕'
          },
          {
            title: '视频讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b2.jpg',
            text: '再别康桥',
            name: '喵喵'
          },
          {
            title: '视频讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b3.jpg',
            text: '书法欣赏入门',
            name: '李小燕'
          },
          {
            title: '视频讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b4.jpg',
            text: '书法欣赏入门',
            name: '李小燕'
          },
          {
            title: '音频讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b5.jpg',
            text: '书法欣赏入门',
            name: '李小燕'
          },
          {
            title: '视频讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b6.jpg',
            text: '再别康桥',
            name: '喵喵'
          },
          {
            title: '图文讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b7.jpg',
            text: '中学生涯',
            name: '吕常荣'
          },
          {
            title: '视频讲座',
            img: 'https://bianke.cnki.net/resources/imagesTemp/dachengForum/b8.jpg',
            text: '书法欣赏入门',
            name: '李小燕'
          }
        ]

      }
    }
  }
</script>

<style scoped>

  .e-m-7 {
    width: 1500px;
    margin: 0px auto;
    margin-top: 30px;
    text-align: center;
  }
  .e-m-7 span {
    font-size: 35px;
    font-weight: 500;
    margin-top: 20px;
  }

  .e-m-7 .m7-di1:hover {
    background-color: rgb(245, 228, 221);
    border: 1px solid rgb(236, 127, 85);
  }
  .e-m-7 .m7-di1 {
    position: relative;
    margin-right: 20px;
    border: 1px solid rgb(237, 237, 237);
  }
  .e-m-7 .m7-di1 h4 {
    display: block;
    margin-top: 10px;
    margin-right: 0px;
  }
  .e-m-7 .m7-di1 p {
    display: block;
    margin-top: -15px;
    font-size: 15px;
    margin-right: 220px;
  }
  .e-m-7-row2 {
    margin-top: 25px;
  }
  .e-m-7 .m7-di1 img {
    padding-top: 20px;
  }

  .e-m-7 el-col {
    background-color: #42b983;
  }
  .e-m-7 .e-m-7-text {
    padding-bottom: 40px;
    display: block;
  }
  .e-m-7 .m7-di1 span {
    margin-top: 40px;
    margin-left: 210px;
    display: block;
    position: absolute;
    height: 30px;
    width: 80px;
    line-height: 30px;
    border-radius: 20px;
    font-size: 13px;
    color: white;
    background-color: rgba(23, 22, 22, 0.6);
  }
  .e-m-7 .e-m-7-text2 {

    display: block;
    border-radius: 30px;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    margin: 70px auto;
    width: 250px;
    color: white;
    background-color: rgb(251, 183, 86);
  }
</style>
